<template>
    <view class="library-view-comment">
        <!-- 评论头部 -->
        <view class="comment-header">
            <view class="comment-count">评论 {{ commentCount }}</view>
            <view class="sortord">
                <han-icon name="sortord" size="34" />
                <text name="sortord-text">{{ '最新' }}</text>
            </view>
        </view>

        <!-- 无评论提示 -->
        <view v-if="commentList.length === 0" class="no-comment">
            <text>暂无评论，快来发表第一条评论吧~</text>
        </view>

        <!-- 评论列表 -->
        <view class="comment-List">
            <view
                class="comment-item"
                v-for="(comment, index) in commentList"
                :key="comment.commentId"
            >
                <!-- 评论头部 -->
                <view class="comment-header">
                    <image
                        class="active-image"
                        :src="comment.author.avatarUrl"
                    ></image>

                    <!-- 用户信息 -->
                    <view class="user">
                        <view class="user-info">
                            <view class="user-name">{{
                                comment.author.username
                            }}</view>
                            <han-tag
                                v-if="comment.author.userId == authorId"
                                class="comment-author"
                                text="作者"
                            />
                            <han-icon
                                :name="`lv${comment.author.userLevel}`"
                                size="48"
                            />
                        </view>

                        <!-- 时间地点 -->
                        <view class="time-location">
                            <view class="time">{{
                                formatTime(comment.createTime)
                            }}</view>
                            <view class="location">{{ comment.location }}</view>
                        </view>
                    </view>

                    <!-- 点赞 -->
                    <view class="likes">
                        <han-icon name="likes" />
                        <text class="likes-text">{{ comment.likeCount }}</text>
                    </view>
                </view>

                <!-- 评论内容 -->
                <view class="comment-content">
                    <view class="content-text">{{ comment.content }}</view>
                </view>

                <!-- 评论回复 -->
                <view class="comment-reply" v-if="comment.replyCount > 0">
                    <view
                        class="reply-item"
                        v-for="reply in visibleReplies(comment)"
                        :key="reply.replyId"
                    >
                        <!-- 回复头部 -->
                        <view class="reply-header">
                            <image
                                class="active-image"
                                :src="reply.author.avatarUrl"
                            ></image>

                            <!-- 用户信息 -->
                            <view class="user">
                                <view class="user-info">
                                    <view class="user-name">{{
                                        reply.author.username
                                    }}</view>
                                    <han-tag
                                        v-if="reply.author.userId == authorId"
                                        class="comment-author"
                                        text="作者"
                                    />
                                    <han-icon
                                        :name="`lv${reply.author.userLevel}`"
                                        size="48"
                                    />
                                </view>

                                <!-- 时间地点 -->
                                <view class="time-location">
                                    <view class="time">{{
                                        formatTime(reply.createTime)
                                    }}</view>
                                    <view class="location">{{
                                        reply.location
                                    }}</view>
                                </view>
                            </view>

                            <!-- 点赞 -->
                            <view class="likes" @click="handleLike(reply)">
                                <han-icon name="likes" />
                                <text class="likes-text">{{
                                    reply.likeCount
                                }}</text>
                            </view>
                        </view>

                        <!-- 回复内容 -->
                        <view class="reply-content">
                            <view class="content-text">
                                <text v-if="reply.repliedUser"
                                    >@{{ reply.repliedUser.username }}
                                </text>
                                {{ reply.content }}
                            </view>
                        </view>
                    </view>

                    <!-- 回复数量提示 -->
                    <view
                        v-if="comment.replyCount > 3 && !comment.showAllReplies"
                        class="more-replies"
                        @click="showMoreReplies(comment, index)"
                    >
                        <view class="text"
                            >展开
                            {{ comment.replyCount - 3 }}
                            条回复
                        </view>
                        <han-icon name="open" size="24" class="icon" />
                    </view>

                    <!-- 加载更多按钮 -->
                    <view
                        v-if="
                            comment.showAllReplies &&
                            comment.replyCount > comment.replies.length
                        "
                        class="load-more"
                        @click="loadMoreReplies(comment, index)"
                    >
                        <view class="text">
                            加载更多回复 ({{
                                comment.replyCount - comment.replies.length
                            }}条剩余)
                        </view>
                        <han-icon name="open" size="24" class="icon" />
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue';

// 假数据生成
const generateMockData = () => {
    const comments = [];
    const locations = ['北京', '上海', '广州', '深圳', '杭州', '成都'];

    for (let i = 1; i <= 5; i++) {
        const comment = {
            commentId: i,
            author: {
                userId: 1000 + i,
                username: `用户${i}`,
                avatarUrl: '/static/logo.png',
                userLevel: Math.floor(Math.random() * 3) + 1
            },
            createTime: `2023-06-${10 + i} 14:3${i}:00`,
            content: `这是第${i}条评论内容，关于汉服文化的讨论`,
            likeCount: Math.floor(Math.random() * 50),
            replyCount: i % 2 === 0 ? 0 : Math.floor(Math.random() * 5) + 1,
            location: locations[Math.floor(Math.random() * locations.length)],
            showAllReplies: false,
            replies: [],
            currentReplyPage: 1
        };

        // 生成回复
        if (comment.replyCount > 0) {
            for (let j = 1; j <= comment.replyCount; j++) {
                const replyUser = {
                    userId: 2000 + j,
                    username: `回复用户${j}`,
                    avatarUrl: '/static/logo.png',
                    userLevel: Math.floor(Math.random() * 3) + 1
                };

                comment.replies.push({
                    replyId: `${i}-${j}`,
                    author: replyUser,
                    repliedUser:
                        j > 1
                            ? {
                                  userId: 2000 + j - 1,
                                  username: `回复用户${j - 1}`
                              }
                            : null,
                    createTime: `2023-06-${10 + i} 15:${j}0:00`,
                    content: `这是对评论${i}的第${j}条回复`,
                    likeCount: Math.floor(Math.random() * 20),
                    location:
                        locations[Math.floor(Math.random() * locations.length)]
                });
            }
        }

        comments.push(comment);
    }

    return comments;
};

// 使用假数据
const commentList = ref(generateMockData());
const commentCount = computed(() => commentList.value.length);
const authorId = ref(1001); // 假设作者ID

// 时间格式化
const formatTime = (timeString) => {
    return timeString.slice(5, 16).replace('-', '/').replace(' ', ' ');
};

// 点赞处理
const handleLike = (item) => {
    item.likeCount += 1;
    uni.showToast({
        title: '点赞成功',
        icon: 'success'
    });
};

// 显示更多回复
const showMoreReplies = (comment, index) => {
    commentList.value[index].showAllReplies = true;
};

// 加载更多回复
const loadMoreReplies = (comment, index) => {
    // 模拟加载更多回复
    const newReplies = [...comment.replies];
    const startIndex = comment.replies.length;

    for (let i = 1; i <= 2; i++) {
        const replyId = `${comment.commentId}-${startIndex + i}`;
        const replyUser = {
            userId: 3000 + startIndex + i,
            username: `新用户${startIndex + i}`,
            avatarUrl: '/static/logo.png',
            userLevel: Math.floor(Math.random() * 3) + 1
        };

        newReplies.push({
            replyId,
            author: replyUser,
            repliedUser: {
                userId: comment.author.userId,
                username: comment.author.username
            },
            createTime: `2023-06-${10 + startIndex + i} 16:${i}0:00`,
            content: `这是新加载的回复 ${i}`,
            likeCount: Math.floor(Math.random() * 15),
            location: '广东'
        });
    }

    commentList.value[index].replies = newReplies;
};

// 获取可见的回复列表
const visibleReplies = (comment) => {
    return comment.showAllReplies
        ? comment.replies
        : comment.replies.slice(0, 3);
};
</script>

<style scoped lang="scss">
.library-view-comment {
    padding: 0 20rpx;
    margin: 0 20rpx;
    border-radius: $han-border-radius-lg;
    border: 1rpx solid $han-global-border-color;

    .comment-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 20rpx 0;

        .comment-count {
            font-size: $han-font-size-base;
            font-weight: 600;
        }

        .sortord {
            display: flex;
            align-items: center;
            font-size: $han-font-size-md;
            color: $han-global-secondary-font-color;
        }
    }

    .no-comment {
        text-align: center;
        padding: 40rpx 0;
        color: $han-global-secondary-font-color;
        font-size: $han-font-size-md;
    }

    .comment-List {
        .comment-item {
            width: 100%;
            padding: 20rpx 0;
            border-bottom: 1rpx solid $han-global-border-color;

            &:last-child {
                border-bottom: none;
            }

            .comment-header {
                display: flex;
                .active-image {
                    width: 80rpx;
                    height: 80rpx;
                    border-radius: 50%;
                    border: 1rpx solid $han-global-border-color;
                }

                .user {
                    display: flex;
                    flex-direction: column;
                    margin-left: 20rpx;

                    .user-info {
                        display: flex;
                        align-items: center;

                        .user-name {
                            font-size: $han-font-size-md;
                            font-weight: 600;
                            margin-right: 10rpx;
                        }

                        .comment-author {
                            margin-right: 10rpx;
                            width: 68rpx;
                            height: 38rpx;
                        }
                    }

                    .time-location {
                        display: flex;
                        align-items: center;
                        font-size: $han-font-size-sm;
                        color: $han-global-secondary-font-color;

                        .time {
                            margin-right: 10rpx;
                        }
                    }
                }

                .likes {
                    margin-left: auto;
                    display: flex;
                    align-items: center;

                    .likes-text {
                        margin-left: 10rpx;
                    }
                }
            }

            .comment-content {
                padding-left: 100rpx;

                .content-text {
                    font-size: $han-font-size-md;
                    margin-top: 10rpx;
                }
            }

            .comment-reply {
                padding-left: 100rpx;
                margin-top: 10rpx;

                .reply-item {
                    padding: 15rpx 0;
                    border-top: 1rpx dashed $han-global-border-color;

                    .reply-header {
                        display: flex;
                        align-items: center;

                        .active-image {
                            width: 62rpx;
                            height: 62rpx;
                            border-radius: 50%;
                            border: 1rpx solid $han-global-border-color;
                        }

                        .user {
                            display: flex;
                            flex-direction: column;
                            margin-left: 20rpx;

                            .user-info {
                                display: flex;
                                align-items: center;

                                .user-name {
                                    font-size: $han-font-size-sm;
                                    font-weight: 600;
                                    margin-right: 10rpx;
                                }

                                .comment-author {
                                    margin-right: 10rpx;
                                    width: 68rpx;
                                    height: 38rpx;
                                }
                            }

                            .time-location {
                                display: flex;
                                align-items: center;
                                font-size: $han-font-size-sm;
                                color: $han-global-secondary-font-color;

                                .time {
                                    margin-right: 10rpx;
                                }
                            }
                        }
                        .likes {
                            margin-left: auto;
                            display: flex;
                            align-items: center;

                            .likes-text {
                                margin-left: 10rpx;
                            }
                        }
                    }

                    .reply-content {
                        padding-left: 82rpx;

                        .content-text {
                            font-size: $han-font-size-md;
                            margin-top: 10rpx;
                        }
                    }
                }
                .more-replies,
                .load-more {
                    display: flex;
                    align-items: center;
                    color: $han-global-secondary-font-color;
                    padding: 10rpx 0;

                    .text {
                        font-size: $han-font-size-sm;
                        margin: 0 10rpx;
                    }

                    .icon {
                        margin-right: 10rpx;
                    }
                }
            }
        }
    }
}
</style>
